<template>
    <!-- 设备抗地理位置泄露-大屏 -->
    <el-container ref="bigModel" class="main-model">
        <el-header>
            <Header :active-title="2" />
        </el-header>
        <el-main>
            <dialog8 @showDialog="showD" />
            <div class="home-model" style="background-color: #041120">
                <el-row style="height: 100%">
                    <el-col :span="leftModelSpan" style="height: 100%">
                        <div class="home-model-left">
                            <!-- 浮层 -->
                            <div class="zindexModel" />
                            <div class="zindexModel2" />

                            <img v-if="rightModelShow" :src="require('@/assets/xd/new/Group 1142813242.png')" alt=""
                                class="rightJ" style="z-index: 5;" @click="hideRightModel">
                            <img v-else :src="require('@/assets/xd/new/Group 1142813263.png')" alt="" class="rightJ"
                                style="z-index: 5;" @click="showRightModel">
                        </div>
                        <div class="xd-dialog">
                            <div class="dialog_bg2">
                                <div class="title">
                                    设备信息
                                </div>
                                <div class="body2">
                                    <div class="unit-info">
                                        <span>所属单位：</span>
                                        <span class="right-align">单位1</span>
                                    </div>
                                    <div class="unit-info">
                                        <span>泄露距离：</span>
                                        <span class="right-align red-text">2.1KM</span>
                                    </div>
                                    <div class="unit-info">
                                        <span>设备真实地理位置：</span>
                                        <span class="right-align">(33.6246，126.3656)</span>
                                    </div>
                                    <div class="unit-info">
                                        <span class="right-align">河南省郑州市高新区翠竹路56号</span>
                                    </div>
                                </div>
                                <div class="bt">
                                    <el-button @click="dialogVisible = true">
                                        抗定位
                                    </el-button>
                                    <el-button @click="tonetworkestimate">详情</el-button>
                                </div>
                            </div>
                            <div class="_bg1" />
                            <img :src="require('@/assets/xd/location5.png')" alt=""
                                style="position: relative; top: 80%; left: 60%; z-index: 200">
                        </div>
                    </el-col>
                    <el-col :span="rightModelSpan">
                        <div class="home-model-right">
                            <div class="infoModel">
                                <div class="infoTitle flex-container">
                                    设备位置泄露风险统计
                                    <!-- 跳转设备管理页面 -->
                                    <el-button type="text" @click="showequipment" class="more">
                                        更多
                                    </el-button>
                                </div>
                                <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                                    <pie />
                                </div>
                            </div>
                            <div class="infoModel">
                                <div class="infoTitle flex-container">
                                    设备位置泄露风险告警
                                    <!-- 跳转终端页面 -->
                                    <el-button type="text" @click="showantiLocalization" class="more">
                                        更多
                                    </el-button>
                                </div>
                                <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                                    <list-scroll class="box" :speed="0.5">
                                        <div class="list">
                                            <div class="infoItem1" v-for="(item, index) in infoList" :key="index"
                                                @click="">
                                                <div class="_num">
                                                    {{ index + 1 }}
                                                </div>
                                                <div class="_cont">
                                                    {{ item.content }}
                                                </div>
                                            </div>
                                        </div>
                                    </list-scroll>
                                </div>
                            </div>
                            <div class="infoModel">
                                <div class="infoTitle flex-container">
                                    设备抗定位任务列表
                                    <!-- 跳转终端页面 -->
                                    <el-button type="text" @click="showantiLocalization" class="more">
                                        更多
                                    </el-button>
                                </div>
                                <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                                    <list-scroll class="box" :speed="0.5">
                                        <div class="list">
                                            <div class="infoItem2" v-for="(item, index) in infoList2" :key="index">
                                                <div class="_num">
                                                    {{ index + 1 }}
                                                </div>
                                                <div class="_cont">
                                                    {{ item.content }}
                                                </div>
                                            </div>
                                        </div>
                                    </list-scroll>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!-- 抗定位按钮 新建抗定位任务弹窗 -->
            <el-dialog class="maindialog" title="新建抗定位任务" :visible.sync="dialogVisible" width="40%" z-index="10000">
                <div class="">
                    <el-descriptions title="设备信息">
                        <el-descriptions-item label="IP地址">
                            202.196.0.55
                        </el-descriptions-item>
                        <el-descriptions-item label="归属单位" style="width: 50">
                            单位1
                        </el-descriptions-item>
                        <el-descriptions-item label="设备真实地理位置">
                            河南省郑州市高新区翠竹路56号
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
                <!-- 下面部分 -->
                <div class="">
                    <el-descriptions title="抗定位配置">
                        <el-descriptions-item label="干扰方式">
                            <el-radio-group v-model="radioVal" @input="handleRadioChange">
                                <el-radio label="1" selceted>
                                    基于虚假地标的抗定位2
                                </el-radio>
                                <el-radio label="2">
                                    基于时延混淆的抗定位2
                                </el-radio>
                            </el-radio-group>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
                <!-- 虚假web地标信息列表 -->
                <div style="height: 370px;overflow: hidden;" v-if="radioVal == 1">
                    <span>虚假web地标信息列表</span>
                    <el-table ref="singleTable" :data="tableData" style="width: 100%;height: 100%;" @row-click="handleRowClick">
                        <el-table-column label="" width="55">
                            <template slot-scope="scope">
                                <el-radio v-model="selectedRow" :label="scope.$index + 1"
                                    @change="handleSelectionChange(scope.$index + 1, scope.row)" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="ip" label="IP地址" />
                        <!-- 端口设置成可以输入的 -->
                        <el-table-column prop="port" label="端口">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.port" style="width: 100px;" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="nominalposition" label="虚假地标标称位置" />
                        <el-table-column prop="protectedAddress" label="受保护目标" />
                    </el-table>
                </div>
                <div v-if="radioVal == 2">
                    <span>设置回复延迟：</span>
                    <el-input ref="inputTime" v-model="input1" placeholder="XX毫秒" style="width: 150px" />
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">
                        取消
                    </el-button>
                    <el-button type="primary" @click="showDetails">
                        提交
                    </el-button>
                </div>
            </el-dialog>
        </el-main>
        <el-dialog class="maindialog2" :visible.sync="dialogDetails" width="30%" z-index="10000">
            <template #title>
                <div style="font-weight:bold;font-size:20px;color: #fff;text-align: center;">
                    新建设备抗定位任务
                </div>
            </template>
            <span class="dialogDetailstext">新建设备抗定位任务完成，任务执行需要一段时间，完成后将在消息框进行提示。</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogDetails = false">确 定</el-button>
            </span>
        </el-dialog>
    </el-container>
</template>
<script>
import Header from "@/views/xd/components/Header";
import dialog8 from "@/views/xd/components/dialog/dialog8.vue";
import pie from "@/views/xd/components/charts/new/home5.vue";
import ListScroll from "@/components/DtSrcollCopy2";

export default {
    components: { Header, dialog8, pie, ListScroll },
    data() {
        return {
            rightModelShow: true,
            dialogDetails: false,
            rightModelSpan: 5,
            leftModelSpan: 19,
            activeIndex: "1",
            activeIndex2: "1",
            formInline: {
                user: "",
                region: "",
            },
            myChart: {},
            pieData: [
                {
                    value: 190,
                    name: "风险距离<5KM",
                },
                {
                    value: 60,
                    name: "20KM<风险距离<30KM",
                },
                {
                    value: 70,
                    name: "20KM<风险距离",
                },
            ],
            pieName: [],
            infoList: [
                {
                    content: "461单位，202.196.0.37，风险距离为3KM",
                },
                {
                    content: "552单位，202.196.0.45，风险距离为3KM",
                },
                {
                    content: " 832单位，202.196.0.62，风险距离为3KM",
                },
                {
                    content: "741单位，202.196.0.65，风险距离为3KM",
                },
                {
                    content: "156单位，202.196.0.35，风险距离为7KM",
                },
                {
                    content: "552单位，202.196.0.45，风险距离为3KM",
                },
                {
                    content: " 832单位，202.196.0.62，风险距离为3KM",
                },
            ],
            infoList2: [
                {
                    content: "202.196.0.48 位置保护任务已执行完成",
                },
                {
                    content: "202.196.0.45 位置保护任务已完成70%",
                },
                {
                    content: "202.196.0.42 位置保护任务已完成60%",
                },
                {
                    content: "202.196.0.96 位置保护任务已完成50%",
                },
                {
                    content: "202.196.0.47 位置保护任务已完成40%",
                },
                {
                    content: "202.196.0.12 位置保护任务已完成30%",
                },
                {
                    content: "202.196.0.42 位置保护任务已完成60%",
                },
                {
                    content: "202.196.0.96 位置保护任务已完成50%",
                },
                {
                    content: "202.196.0.47 位置保护任务已完成40%",
                },
                {
                    content: "202.196.0.12 位置保护任务已完成30%",
                },
                {
                    content: "202.196.0.42 位置保护任务已完成60%",
                },
                {
                    content: "202.196.0.96 位置保护任务已完成50%",
                },
                {
                    content: "202.196.0.47 位置保护任务已完成40%",
                },
                {
                    content: "202.196.0.12 位置保护任务已完成30%",
                },
                {
                    content: "202.196.0.42 位置保护任务已完成60%",
                },
                {
                    content: "202.196.0.96 位置保护任务已完成50%",
                },
            ],
            tableData2: [
                {
                    ip: "202.196.0.12",
                    nominalposition: "河南农业大学",
                    layoutposition: "河南大学",
                    protectedAddress: "郑州轻工业大学",
                },
                {
                    ip: "202.196.0.19",
                    nominalposition: "华北水利水电大学",
                    layoutposition: "浙江交通大学",
                    protectedAddress: "郑州轻工业大学",
                },
                {
                    ip: "202.196.0.78",
                    nominalposition: "河南牧业经济学院",
                    layoutposition: "清华大学",
                    protectedAddress: "郑州轻工业大学",
                },
                {
                    ip: "202.196.0.11",
                    nominalposition: "河南职业技术学院",
                    layoutposition: "清华大学",
                    protectedAddress: "郑州轻工业大学",
                },
                {
                    ip: "202.196.0.65",
                    nominalposition: "河南警察学院",
                    layoutposition: "清华大学",
                    protectedAddress: "郑州轻工业大学",
                },
                {
                    ip: "202.196.0.56",
                    nominalposition: "河南财经政法大学",
                    layoutposition: "清华大学",
                    protectedAddress: "郑州轻工业大学",
                },
            ],
            infoHeight: 300,

            scrollTop: 0,
            // 弹窗数据
            input: "设置回复延迟",
            input1: "",
            radioVal: "1",
            selectedRow: null, // 用于存储当前选中的行的索引
            dialogVisible2: false,
            dialogVisible: false,
            tableData: [
                {
                    ip: "202.196.0.32",
                    nominalposition: "河南农业大学",
                    port: "80",
                    layoutposition: "河南大学",
                    protectedAddress: "郑州轻工业大学",
                },
                {
                    ip: "202.196.0.35",
                    nominalposition: "华北水利水电大学",
                    port: "80",
                    layoutposition: "浙江交通大学",
                    protectedAddress: "郑州轻工业大学",
                },
                {
                    ip: "202.196.0.45",
                    nominalposition: "河南牧业经济学院",
                    port: "80",
                    layoutposition: "清华大学",
                    protectedAddress: "郑州轻工业大学",
                },
                {
                    ip: "202.196.0.23",
                    port: "80",
                    nominalposition: "河南职业技术学院",
                    layoutposition: "清华大学",
                    protectedAddress: "郑州轻工业大学",
                },
                {
                    ip: "202.196.0.52",
                    port: "80",
                    nominalposition: "河南警察学院",
                    layoutposition: "清华大学",
                    protectedAddress: "郑州轻工业大学",
                },
                {
                    ip: "202.196.0.65",
                    port: "80",
                    nominalposition: "河南财经政法大学",
                    layoutposition: "清华大学",
                    protectedAddress: "郑州轻工业大学",
                },
            ],
        };
    },
    mounted() {
        this.infoHeight = (this.$refs.bigModel.$el.offsetHeight - 80) / 3;
        let that = this;
        setTimeout(function () {
            that.initDate();
        }, 0);
    },
    methods: {
        showDetails() {
            this.dialogVisible = false;
            this.dialogDetails = true;
        },
        show() {
            this.$emit("showDialog");
        },
        handleRadioChange(value) {
            if (value == 2) {
                this.$refs.inputTime.focus();
            }
        },
        showD() {
            this.dialogVisible = true;
        },
        tonetworkestimate() {
            this.$router.push("/networkestimate");
        },
        showequipment() {
            this.$router.push("/networkEquipment/equipment");
        },
        showantiLocalization() {
            this.$router.push("/networkEquipment/antiLocalization");
        },
        hideRightModel() {
            this.rightModelShow = false;
            this.rightModelSpan = 0;
            this.leftModelSpan = 24;
        },
        showRightModel() {
            this.rightModelShow = true;
            this.rightModelSpan = 5;
            this.leftModelSpan = 19;
        },
        onSubmit() { },

        initDate() {
            for (let i = 0; i < this.pieData.length; i++) {
                this.pieName[i] = this.pieData[i].name;
            }
        },
        handleRowClick(row, column, event) {
            console.log(row, column, event);
        },
        handleSelectionChange(index, row) {
            console.log(row);
            this.selectedRow = index;
        },
    },
};
</script>
<style scoped>
.el-header {
    padding: 0;
    z-index: 10;
}

.home-model-right {

    border-radius: 5px;
    padding: 5px;

    .infoContent {
        padding-top: 48px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .infoModel {
        position: relative;

        .infoTitle {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background-image: url(~@/assets/xd/new/title.png);
            background-size: 100% 80%;
            background-repeat: no-repeat;
            color: #fff;
        }

        .infoBody {
            height: 100%;
            padding-top: 48px;
            box-sizing: border-box;
        }
    }
}

.home-model-left {
    position: relative;
    height: 100%;
    background-image: url('~@/assets/xd/xd-bg3.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.home-model {
    position: relative;
    width: 100%;
    height: 100%;
}

.xd-dialog {
    position: absolute;
    top: 27%;
    left: 10%;
    width: 320px;
    height: 220px;
    z-index: 100;

    ._bg1 {
        position: absolute;
        top: 300px;
        left: 100px;
        width: 100%;
        height: 100%;
        background-image: url("~@/assets/xd/dialogbg.png");
        /* background-color: rgb(32, 59, 87); */
        background-repeat: no-repeat;
        background-size: 100% 100%;
        /* // opacity: 0.6; */
        color: #90CEE9;
        padding: 10px;
        font-size: 16px;
    }

    .dialog_bg2 {
        position: absolute;
        top: 300px;
        left: 100px;
        z-index: 1000;
        width: 100%;
        height: 100%;
        color: #90CEE9;
        padding: 10px;
        font-size: 19px;
    }

    .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 20px;
        color: #ffffff;
        line-height: 19px;
        text-align: left;
        font-style: normal;
        text-align: center;
    }

    .body2 {
        position: absolute;
        top: 50px;
        font-size: 16px;
    }

    .red-text {
        color: red;
    }

    .bt {
        position: absolute;
        bottom: 10px;
        left: 80px;
    }

    .el-button {
        font-size: 13px;
        width: 80px;
        height: 30px;
        background: linear-gradient(270deg, #2DB2FD 0%, #0E5FFF 100%);
        border-radius: 2px 2px 2px 2px;
        border: none;
        color: #fff;
        text-align: center;
    }
}

.dialog-footer {
    text-align: center;
}

.flex-container {
    display: flex;
    justify-content: space-between;
}

.infoItem {
    line-height: 1.3em !important;
    font-size: 20px;
}

.home-model-right .infoModel .infoTitle {
    z-index: 10;
}

.infoList {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.scroll-div {
    position: absolute;
    width: 100%;
    bottom: -1px;
    margin-top: 10px;
    overflow: hidden;
    border-top-left-radius: 30px;
}

.dialogDetailstext {
    font-size: 18px;
    font-weight: bolder;
    color: #fff;
}

.dialog-footer {
    text-align: center;
}

.more {
    color: #fff;
    font-size: 22px;
    font-weight: bold;
}

.home-model {
    background-color: transparent !important;

}

.zindexModel {
    position: absolute;
    background-color: #1539688d;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.zindexModel2 {
    position: absolute;
    top: 5%;
    left: 20%;
    z-index: 2;
    width: 850px;
    height: 850px;
    background: rgba(150, 179, 254, 0.2);
    border-radius: 50%;
}
</style>
